<template>
  <div class="wrapper">
    <!--        左侧信息-->
    <div class="wrapper-left">
      <!--      病人信息-->
      <div class="left-top">
        <div class="patient-bedno">{{ patientBasicdata.bedno }}床</div>
        <div class="patitent-name-age-sex">
          <div class="patient-name">{{ patientBasicdata.patient_name }}</div>
          <div class="patient-age">{{ patientBasicdata.age }}岁</div>
          <div class="patient-sex">{{ patientBasicdata.sex }}</div>
        </div>
        <div class="div_btn" style="display: flex">
          <div class="patient-patientstatus">{{ patientBasicdata.patientstatus }}</div>
          <div> <el-button type="primary" size="mini" class="WardRoundRemarksBtn" @click="showWardRoundRemarksDialog">备注</el-button></div>
        </div>
        <div class="patient-attentionlev">
          <div class="attentionlev-start">
            <a @click="showChangeLev">
              <template v-if="patientBasicdata.attentionlev === '无关注等级'">
                <i class="el-icon-star-off" />
                <i class="el-icon-star-off" />
                <i class="el-icon-star-off" />
              </template>
              <template v-if="patientBasicdata.attentionlev === '低'">
                <i class="el-icon-star-on" />
                <i class="el-icon-star-off" />
                <i class="el-icon-star-off" />
              </template>
              <template v-if="patientBasicdata.attentionlev === '中'">
                <i class="el-icon-star-on" />
                <i class="el-icon-star-on" />
                <i class="el-icon-star-off" />
              </template>
              <template v-if="patientBasicdata.attentionlev === '高'">
                <i class="el-icon-star-on" />
                <i class="el-icon-star-on" />
                <i class="el-icon-star-on" />
              </template>
            </a>
          </div>

          <div class="attentionlev-value">{{ patientBasicdata.attentionlev }}</div>
        </div>
        <div class="content">
          <div class="content-title">住院号:</div>
          <div class="content-value">{{ patientBasicdata.inp_no }}</div>
        </div>
        <div class="content">
          <div class="content-title">科室:</div>
          <div class="content-value">{{ patientBasicdata.deptname }}</div>
        </div>
        <div class="content">
          <div class="content-title">身高(cm):</div>
          <div class="content-value">{{ patientBasicdata.height }}</div>
        </div>
        <div class="content">
          <div class="content-title">体重(kg):</div>
          <div class="content-value">{{ patientBasicdata.weight }}</div>
        </div>
        <div class="content">
          <div class="content-title">入院诊断:</div>
          <div class="content-value">{{ patientBasicdata.disname }}</div>
        </div>
        <div class="content">
          <div class="content-title">入院时间:</div>
          <div class="content-value">{{ patientBasicdata.startdate }}</div>
        </div>
        <div class="content">
          <div class="content-title">主管医生:</div>
          <div class="content-value">{{ patientBasicdata.doctorname }}</div>
        </div>
      </div>
      <!--      病人状态-->
      <div class="left-bottom">
        <div class="bottom-title">状态</div>
        <div class="content">
          <div class="content-title">妊娠状态:</div>
          <div class="content-value">{{ patientBasicdata.lact }}</div>
        </div>
        <div class="content">
          <div class="content-title">哺乳状态:</div>
          <div class="content-value">{{ patientBasicdata.lact }}</div>
        </div>
        <div class="content">
          <div class="content-title">肝损害状态:</div>
          <div class="content-value">{{ patientBasicdata.hep }}</div>
        </div>
        <div class="content">
          <div class="content-title">肾损害状态:</div>
          <div class="content-value">{{ patientBasicdata.ren }}</div>
        </div>

      </div>
    </div>
    <!--        右侧信息-->
    <div class="wrapper-right">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="监护图表" name="first">
          <div class="patient-risk">
            <div class="risk-top">
              <div class="risk-top-wrapper">
                <div class="risk-title">风险提示</div>
                <div class="risk-icon"> <a @click="showRiskwaring"> <i class="el-icon-setting" /></a></div>
                <div class="rick-data">
                  <a>
                    <el-tag :type="activetype === '5' ? '' : 'info'" size="mini" @click="changeActiveDate('5')">5天内</el-tag>
                  </a>
                  <a>
                    <el-tag :type="activetype === '4' ? '' : 'info'" size="mini" @click="changeActiveDate('4')">4天内</el-tag>
                  </a>
                  <a>
                    <el-tag :type="activetype === '3' ? '' : 'info'" size="mini" @click="changeActiveDate('3')">3天内</el-tag>
                  </a>
                  <a>
                    <el-tag :type="activetype === '2' ? '' : 'info'" size="mini" @click="changeActiveDate('2')">2天内</el-tag>
                  </a>
                  <a>
                    <el-tag :type="activetype === '1' ? '' : 'info'" size="mini" @click="changeActiveDate('1')">1天内</el-tag>
                  </a>

                </div>
              </div>
              <div class="rick-value">
                <el-button icon="el-icon-arrow-left" class="change-scrollbar" type="info" @click="clickArrowLeft" />
                <el-scrollbar ref="elbar" style="width:850px;height:100px">
                  <div class="card-list">
                    <template v-if="patientRiskdata.patientRiskDate.length === 0">
                      <el-card
                        shadow="hover"
                        class="card-info-item"
                      >
                        <div class="card-info">
                          <div class="info-content">
                            <div>无风险提示</div>
                          </div>
                        </div>
                      </el-card>
                    </template>
                    <template v-for="(item,index) in patientRiskdata.patientRiskDate" v-else>
                      <el-card
                        :key="index"
                        shadow="hover"
                        class="card-info-item"
                      >
                        <div class="card-info">
                          <div class="info-content">
                            <div>{{ item.patientrisk }}</div>
                          </div>
                        </div>
                      </el-card>
                    </template>

                  </div>
                </el-scrollbar>
                <el-button icon="el-icon-arrow-right" class="change-scrollbar" type="info" @click="clickArrowRight" />
              </div>
            </div>
            <div class="risk-chart">
              <div class="risk-title">持续关注项目</div>
              <div
                id="myChart"
                class="myChart"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="医嘱信息" name="second">
          <patient-ordersdata :patient-detail-father="patientDetail" />
        </el-tab-pane>
        <el-tab-pane label="检验信息" name="third">
          <patient-lab-list :patient-detail-father="patientDetail" />
        </el-tab-pane>
        <el-tab-pane label="检查信息" name="fourth">
          <PatientExamList :patient-detail-father="patientDetail" />
        </el-tab-pane>
        <!--        <el-tab-pane label="病程记录" name="fifth">定时任务补偿</el-tab-pane>-->
        <el-tab-pane label="历史诊疗信息" name="sixth">
          <history-info :patient-detail-father="patientDetail" />
        </el-tab-pane>
        <!--        <el-tab-pane label="监护日志" name="seventh">定时任务补偿</el-tab-pane>-->
      </el-tabs>
    </div>
    <!--    修改关注等级-->
    <el-dialog
      title="修改关注等级"
      :visible.sync="attentionlevVisible"
    >
      <el-radio-group v-model="attentionlev">
        <el-radio :label="''">无关注</el-radio>
        <el-radio :label="'低'">
          <span>低</span>
          <i class="el-icon-star-on" />
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
        </el-radio>
        <el-radio :label="'中'">
          <span>中</span>
          <i class="el-icon-star-on" />
          <i class="el-icon-star-on" />
          <i class="el-icon-star-off" />
        </el-radio>
        <el-radio :label="'高'">
          <span>高</span>
          <i class="el-icon-star-on" />
          <i class="el-icon-star-on" />
          <i class="el-icon-star-on" />
        </el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeChangeLev">取 消</el-button>
        <el-button type="primary" @click="changeLev">确 定</el-button>
      </div>
    </el-dialog>
    <!--    修改风险提示-->
    <el-dialog title="风险提示设置" :visible.sync="riskwaringJsonVisible">
      <el-form :model="RiskwaringJson">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-radio-group v-model="RiskwaringJson.Type">
            <el-radio :label="'1'">仅用于此病历</el-radio>
            <el-radio :label="'2'">应用于监护范围内所有病历</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="诊断" :label-width="formLabelWidth">
          <el-input v-model="RiskwaringJson.Disname" readonly="readonly" clearable class="c_search" type="text" placeholder="诊断" />
          <i class="c_searchbtn" @click="selectPop('诊断')">选择</i>
        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-select v-model="RiskwaringJson.Ageoperator" class="risk-select" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input-number v-model="RiskwaringJson.Agemin" :disabled="flags.AgeminFlag" class="input-number" controls-position="right" :min="0" :max="200" />
          <span>到</span>
          <el-input-number v-model="RiskwaringJson.Agemax" :disabled="flags.AgemaxFlag" class="input-number" controls-position="right" :min="0" :max="200" />
          <span>岁</span>
        </el-form-item>

        <el-form-item label="体温" :label-width="formLabelWidth">
          <el-select v-model="RiskwaringJson.Temperatureoperator" class="risk-select" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input-number v-model="RiskwaringJson.Temperaturemin" :disabled="flags.TemperatureminFlag" class="input-number" controls-position="right" :min="0" :max="100" />
          <span>到</span>
          <el-input-number v-model="RiskwaringJson.Temperaturemax" :disabled="flags.TemperaturemaxFlag" class="input-number" controls-position="right" :min="0" :max="100" />
          <span>℃</span>
        </el-form-item>

        <el-form-item label="收缩压" :label-width="formLabelWidth">
          <el-select v-model="RiskwaringJson.Spoperator" class="risk-select" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input-number v-model="RiskwaringJson.Spmin" :disabled="flags.SpminFlag" class="input-number" controls-position="right" :min="0" />
          <span>到</span>
          <el-input-number v-model="RiskwaringJson.Spmax" :disabled="flags.SpmaxFlag" class="input-number" controls-position="right" :min="0" />
          <span>mmHg(或者关系)</span>
        </el-form-item>

        <el-form-item label="舒张压" :label-width="formLabelWidth">
          <el-select v-model="RiskwaringJson.Dpoperator" class="risk-select" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input-number v-model="RiskwaringJson.Dpmin" :disabled="flags.DpminFlag" class="input-number" controls-position="right" :min="0" />
          <span>到</span>
          <el-input-number v-model="RiskwaringJson.Dpmax" :disabled="flags.DpmaxFlag" class="input-number" controls-position="right" :min="0" />
          <span>mmHg(或者关系)</span>
        </el-form-item>

        <el-form-item label="空腹血糖" :label-width="formLabelWidth">
          <el-select v-model="RiskwaringJson.Bloodsugaroperator" class="risk-select" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input-number v-model="RiskwaringJson.Bloodsugarmin" :disabled="flags.BloodsugarminFlag" class="input-number" controls-position="right" :min="0" />
          <span>到</span>
          <el-input-number v-model="RiskwaringJson.Bloodsugarmax" :disabled="flags.BloodsugarmaxFlag" class="input-number" controls-position="right" :min="0" />
          <span>mmol/L</span>
        </el-form-item>

        <el-form-item label="出院带药" :label-width="formLabelWidth">
          <el-input v-model="RiskwaringJson.Outdrugname" readonly="readonly" clearable class="c_search" type="text" placeholder="出院带药" />
          <i class="c_searchbtn" @click="selectPop('药品')">选择</i>
        </el-form-item>

        <el-form-item label="出院带药品种数" :label-width="formLabelWidth">
          <span>≥</span>
          <el-input-number v-model="RiskwaringJson.Outnum" class="input-number" controls-position="right" :min="0" />
          <span>种(按药品编码唯一化)</span>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeRiskwaring">取 消</el-button>
        <el-button type="primary" @click="saveRiskwaring">确 定</el-button>
      </div>
    </el-dialog>
    <Poptable
      ref="ptable"
      :p-type="pType"
      ctype="zy"
      @handleDictDisease="handleDictDisease"
      @handleRsikUniquecode="handleRsikUniquecode"
    />
    <!--备注-->
    <el-dialog
      title="备注"
      :visible.sync="WardRoundRemarksDialog"
      @close="closeWardRoundRemarksDialog"
    >
      <el-form :model="WardRoundRemarksJson">
        <el-form-item label="备注类型" :label-width="formLabelWidth">
          <div style="display: flex;justify-content: space-between">
            <el-select v-model="WardRoundRemarksJson.RemarksType" placeholder="请选择备注类型">
              <el-option label="调整用法用量" value="调整用法用量" />
              <el-option label="改变药品" value="改变药品" />
              <el-option label="药品停用" value="药品停用" />
            </el-select>
            <el-button type="primary" @click="selectPopNoSearch('病人医嘱')">病人医嘱</el-button>
          </div>
        </el-form-item>
        <el-form-item label="医嘱内容" :label-width="formLabelWidth">
          <el-input v-model="WardRoundRemarksJson.OrdderName" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="用法用量" :label-width="formLabelWidth">
          <el-input v-model="WardRoundRemarksJson.UsagDosage" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="开嘱时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="WardRoundRemarksJson.Startdate"
            type="datetime"
            autocomplete="off"
            :disabled="true"
            placeholder="选择日期时间"
          />
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="WardRoundRemarksJson.Remarks" autocomplete="off" type="textarea" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeWardRoundRemarksDialog">取 消</el-button>
        <el-button v-if="isWardRoundRemarks" type="primary" @click="SaveWardRoundRemarks('save')">保 存</el-button>
        <el-button v-else type="primary" @click="SaveWardRoundRemarks('update')">修 改</el-button>
      </div>
    </el-dialog>
    <poptablenosearch
      ref="poptablenosearch"
      :patient-id="patientDetail.patient_id"
      :visit-id="patientDetail.visit_id"
      :p-type="pType"
      ctype="zy"
      @handleCurrentPatientOrdersList="handleCurrentPatientOrdersList"
    />

  </div>

</template>

<script>
// 按需引入 引入 ECharts 主模块
// eslint-disable-next-line no-unused-vars
import { login } from '../../../../api/user'
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

import Poptable from '../../components/poptable'
import poptablenosearch from '../../components/poptablenosearch'
import PatientOrdersdata from './PatientOrdersdata'
import PatientLabList from './PatientLabList'
import PatientExamList from './PatientExamList'
import HistoryInfo from './HistoryInfo'
import { gslGetGuardianshipPatientDetail,
  gslSavePatientAttentionInfo,
  gslGetPatientRiskdata, gslSaveRiskwaringJson,
  GetWardRoundRemarks, SaveWardRoundRemarks } from '@/api/cpw'
export default {
  name: 'PatientDetail',
  components: { Poptable, PatientOrdersdata, PatientLabList, PatientExamList, HistoryInfo, poptablenosearch },
  data() {
    return {
      Userid: '',
      Username: '',
      today: this.getDates(0),
      // yesterday: this.getDates(-1),
      // beforeyesterday: this.getDates(-2),
      // todayDate: '2020/04/19',
      // yesterdayDate: '2019/01/18',
      // beforeyesterdayDate: '2019/01/17',
      // 传入数据
      patientDetail: {},
      // 右侧数据
      patientRiskdata: {
        // 风险提示
        patientRiskDate: [],
        // 病人体温信息
        patientTempdata: [],
        //	病人脉搏信息
        patientPulsedata: []
      },
      activeName: 'first',
      // 左侧数据
      patientBasicdata: {},
      attentionlevVisible: false,
      attentionlev: '',
      activetype: -1,
      // 备注
      WardRoundRemarksJson: {
        OrdderName: '',
        UsagDosage: '',
        RemarksType: '',
        Startdate: '',
        Remarks: '',
        Id: ''
      },
      //
      isWardRoundRemarks: false,
      WardRoundRemarksDialog: false,
      colors: ['#d14a61', '#29a4f2'],
      setOptions: {},
      // 风险提示
      riskwaringJsonVisible: false,
      formLabelWidth: '120px',
      flags: {
        AgeminFlag: true,
        AgemaxFlag: true,
        TemperatureminFlag: true,
        TemperaturemaxFlag: true,
        SpminFlag: true,
        SpmaxFlag: true,
        DpminFlag: true,
        DpmaxFlag: true,
        BloodsugarminFlag: true,
        BloodsugarmaxFlag: true
      },
      RiskwaringJson: {
        Type: '1',
        Status: '1',
        Discode: '',
        Disname: '',
        Ageoperator: '',
        Agemin: undefined,
        Agemax: undefined,
        Temperatureoperator: '',
        Temperaturemin: undefined,
        Temperaturemax: undefined,
        Spoperator: '',
        Spmin: undefined,
        Spmax: undefined,
        Dpoperator: '',
        Dpmin: undefined,
        Dpmax: undefined,
        Bloodsugaroperator: '',
        Bloodsugarmin: undefined,
        Bloodsugarmax: undefined,
        Outdrug: '',
        Outdrugname: '',
        Outnum: undefined
      },
      pType: '12',
      options: [{
        value: '1',
        label: '＞'
      }, {
        value: '2',
        label: '≥'
      }, {
        value: '3',
        label: '＝'
      }, {
        value: '4',
        label: '＜'
      }, {
        value: '5',
        label: '≤'
      }, {
        value: '6',
        label: '≠'
      }]
    }
  },
  // 数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    // 观察option的变化
    setOptions: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal)
          } else {
            this.myChart.setOption(oldVal)
          }
        } else {
          this.initCharts()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    },
    'RiskwaringJson.Ageoperator': {
      handler: function(val, oldVal) {
        if (val !== '') {
          this.flags.AgeminFlag = false
          this.RiskwaringJson.Agemin = '0'
          if (val === '3' || val === '6') {
            this.flags.AgemaxFlag = false
            this.RiskwaringJson.Agemax = '0'
          }
        }
      },
      deep: true
    },
    'RiskwaringJson.Temperatureoperator': {
      handler: function(val, oldVal) {
        if (val !== '') {
          this.flags.TemperatureminFlag = false
          this.RiskwaringJson.Temperaturemin = '0'
          if (val === '3' || val === '6') {
            this.flags.TemperaturemaxFlag = false
            this.RiskwaringJson.Temperaturemax = '0'
          }
        }
      },
      deep: true
    },
    'RiskwaringJson.Spoperator': {
      handler: function(val, oldVal) {
        if (val !== '') {
          this.flags.SpminFlag = false
          this.RiskwaringJson.Spmin = '0'
          if (val === '3' || val === '6') {
            this.flags.SpmaxFlag = false
            this.RiskwaringJson.Spmax = '0'
          }
        }
      },
      deep: true
    },
    'RiskwaringJson.Dpoperator': {
      handler: function(val, oldVal) {
        if (val !== '') {
          this.flags.DpminFlag = false
          this.RiskwaringJson.Dpmin = '0'
          if (val === '3' || val === '6') {
            this.flags.DpmaxFlag = false
            this.RiskwaringJson.Dpmax = '0'
          }
        }
      },
      deep: true
    },
    'RiskwaringJson.Bloodsugaroperator': {
      handler: function(val, oldVal) {
        if (val !== '') {
          this.flags.BloodsugarminFlag = false
          this.RiskwaringJson.Bloodsugarmin = '0'
          if (val === '3' || val === '6') {
            this.flags.BloodsugarmaxFlag = false
            this.RiskwaringJson.Bloodsugarmax = '0'
          }
        }
      },
      deep: true
    }
  },
  activated() {
    const userInfo = localStorage.getItem('user')
    this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
    this.patientDetail = this.$route.query.patientDetail
    this.getGuardianshipPatientDetail()
    this.attentionlev = ''
  },
  mounted() {
    const userInfo = localStorage.getItem('user')
    this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
    this.patientDetail = this.$route.query.patientDetail
    this.getGuardianshipPatientDetail()
    this.attentionlev = ''
    this.$nextTick(() => {
      //  执行echarts方法
      this.initCharts()
    })
  },

  methods: {
    // 备注
    selectPopNoSearch(val) {
      this.$refs.poptablenosearch.show()
      this.pType = val
    },
    showWardRoundRemarksDialog() {
      this.GetWardRoundRemarks()
    },
    // 查询此病人未处理的备注信息
    async GetWardRoundRemarks() {
      await GetWardRoundRemarks({
        json: {
          Userid: this.Userid,
          Patient_id: this.patientDetail.patient_id,
          Visit_id: this.patientDetail.visit_id,
          Inpno: this.patientDetail.inp_no,
          Bedno: this.patientDetail.bedno
        }
      }).then(res => {
        if (res.WardRoundRemarks.length === 0) {
          this.isWardRoundRemarks = true
        } else {
          this.isWardRoundRemarks = false
          this.WardRoundRemarksJson.OrdderName = res.WardRoundRemarks[0].ordername
          this.WardRoundRemarksJson.UsagDosage = res.WardRoundRemarks[0].usagedosage
          this.WardRoundRemarksJson.Startdate = res.WardRoundRemarks[0].startdatetime
          this.WardRoundRemarksJson.Id = res.WardRoundRemarks[0].id
          this.WardRoundRemarksJson.Remarks = res.WardRoundRemarks[0].remarks
        }
        this.WardRoundRemarksDialog = true
      }).catch(err => {
        console.log(err)
      })
    },
    //  保存病人备注信息
    // 根据id 修改病人备注信息
    async SaveWardRoundRemarks(flag) {
      let tempJson = {}
      if (flag === 'save') {
        tempJson = {
          Userid: this.Userid,
          Username: this.Username,
          Patient_id: this.patientDetail.patient_id,
          Patient_name: this.patientDetail.patient_name,
          Visit_id: this.patientDetail.visit_id,
          Inpno: this.patientDetail.inp_no,
          Bedno: this.patientDetail.bedno,
          Deptcode: this.patientDetail.deptcode,
          Deptname: this.patientDetail.deptname,
          OrdderName: this.WardRoundRemarksJson.OrdderName,
          UsagDosage: this.WardRoundRemarksJson.UsagDosage,
          RemarksType: this.WardRoundRemarksJson.RemarksType,
          Startdate: this.WardRoundRemarksJson.Startdate,
          Remarks: this.WardRoundRemarksJson.Remarks
        }
      } else if (flag === 'update') {
        tempJson = {
          Userid: this.Userid,
          Username: this.Username,
          Id: this.WardRoundRemarksJson.Id,
          OrdderName: this.WardRoundRemarksJson.OrdderName,
          UsagDosage: this.WardRoundRemarksJson.UsagDosage,
          RemarksType: this.WardRoundRemarksJson.RemarksType,
          Startdate: this.WardRoundRemarksJson.Startdate,
          Remarks: this.WardRoundRemarksJson.Remarks
        }
      }
      await SaveWardRoundRemarks({
        json: tempJson
      }).then(res => {
        if (res === '保存成功') {
          this.$message({
            message: res,
            type: 'success'
          })
        } else {
          this.$message({
            message: '保存失败',
            type: 'error'
          })
        }
        this.closeWardRoundRemarksDialog()
      }).catch(err => {
        console.log(err)
      })
    },
    closeWardRoundRemarksDialog() {
      this.WardRoundRemarksDialog = false
      this.WardRoundRemarksJson = {
        OrdderName: '',
        UsagDosage: '',
        RemarksType: '',
        Startdate: '',
        Remarks: '',
        Id: ''
      }
    },
    handleCurrentPatientOrdersList(data) {
      this.WardRoundRemarksJson.OrdderName = data[0].ordername
      this.WardRoundRemarksJson.UsagDosage = data[0].usagedosage
      this.WardRoundRemarksJson.Startdate = data[0].startdatetime
    },
    changeActiveDate(tagFlage) {
      this.activetype = tagFlage
      const tempdate = this.getDates(-tagFlage)
      this.getPatientRiskdata(tempdate)
    },
    async saveRiskwaring() {
      var tempObj = JSON.parse(JSON.stringify(this.RiskwaringJson))
      for (var key in tempObj) {
        if (tempObj[key] === '' || tempObj[key] === undefined) {
          delete tempObj[key]
        }
      }
      tempObj.Userid = this.Userid
      tempObj.UserName = this.Username
      tempObj.Patient_id = this.patientDetail.patient_id
      tempObj.Visit_id = this.patientDetail.visit_id
      tempObj.Deptcode = this.patientBasicdata.deptcode
      tempObj.Deptname = this.patientBasicdata.deptname
      for (var key2 in tempObj) {
        if (typeof tempObj[key2] === 'number') {
          tempObj[key2] = tempObj[key2] + ''
        }
      }
      await gslSaveRiskwaringJson({
        json: tempObj
      }).then(res => {
        if (res === '保存成功') {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '保存失败',
            type: 'warning'
          })
        }
        this.closeRiskwaring()
        this.getPatientRiskdata()
      }).catch(err => {
        console.log(err)
      })
    },
    showRiskwaring() {
      this.riskwaringJsonVisible = true
    },
    closeRiskwaring() {
      this.riskwaringJsonVisible = false
      this.RiskwaringJson = {
        Type: '1',
        Status: '1',
        Discode: '',
        Disname: '',
        Ageoperator: '',
        Agemin: undefined,
        Agemax: undefined,
        Temperatureoperator: '',
        Temperaturemin: undefined,
        Temperaturemax: undefined,
        Spoperator: '',
        Spmin: undefined,
        Spmax: undefined,
        Dpoperator: '',
        Dpmin: undefined,
        Dpmax: undefined,
        Bloodsugaroperator: '',
        Bloodsugarmin: undefined,
        Bloodsugarmax: undefined,
        Outdrug: '',
        Outdrugname: '',
        Outnum: undefined
      }
    },
    selectPop(val) {
      this.$refs.ptable.show()
      this.pType = val
    },
    handleDictDisease(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        codes.push(data[i].discode)
        names.push(data[i].disname)
      }
      this.RiskwaringJson.Discode = codes.join(',')
      this.RiskwaringJson.Disname = names.join(',')
    },
    handleRsikUniquecode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        codes.push(data[i].uniquecode)
        names.push(data[i].drugname)
      }
      this.RiskwaringJson.Outdrug = codes.join(',')
      this.RiskwaringJson.Outdrugname = names.join(',')
    },
    async getGuardianshipPatientDetail() {
      this.patientBasicdata = {}
      await gslGetGuardianshipPatientDetail({
        patient_id: this.patientDetail.patient_id,
        visit_id: this.patientDetail.visit_id
      }).then(res => {
        this.patientBasicdata = res.patientBasicdata[0]
        this.getPatientRiskdata(this.today)
      }).catch(err => {
        console.log(err)
      })
    },
    async getPatientRiskdata(date) {
      const json = {
        Patient_id: this.patientDetail.patient_id,
        Visit_id: this.patientDetail.visit_id,
        Deptcode: this.patientBasicdata.deptcode,
        Date: date
      }
      await gslGetPatientRiskdata({
        json: json
      }).then(res => {
        this.patientRiskdata.patientRiskDate = res.patientRiskDate
        this.patientRiskdata.patientTempdata = res.patientTempdata
        this.patientRiskdata.patientPulsedata = res.patientPulsedata
        this.setOptionsData()
      }).catch(err => {
        console.log(err)
      })
    },
    showChangeLev() {
      this.attentionlevVisible = true
    },
    closeChangeLev() {
      this.attentionlevVisible = false
      this.attentionlev = ''
    },
    async changeLev() {
      const json = {
        Userid: this.Userid,
        Username: this.Username,
        Patient_id: this.patientDetail.patient_id,
        Visit_id: this.patientDetail.visit_id,
        Deptcode: this.patientBasicdata.deptcode,
        AttentionLev: this.attentionlev,
        Status: 1
      }
      await gslSavePatientAttentionInfo({
        json: json
      }).then(async res => {
        if (res === '保存成功') {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.getGuardianshipPatientDetail()
        } else {
          this.$message({
            message: '保存失败',
            type: 'warning'
          })
        }
        this.closeChangeLev()
      }).catch(err => {
        console.log(err)
      })
    },
    // 点击左右按钮，控制scrollLeft
    clickArrowLeft() {
      const scrollLeft = this.$refs['elbar'].wrap.scrollLeft
      this.$refs['elbar'].wrap.scrollLeft = scrollLeft - 200
    },
    clickArrowRight() {
      const scrollLeft = this.$refs['elbar'].wrap.scrollLeft
      this.$refs['elbar'].wrap.scrollLeft = scrollLeft + 200
    },
    // 0代表今日,-1代表昨日, -2前天
    getDates(dates) {
      var dd = new Date()
      var n = dates || 0
      dd.setDate(dd.getDate() + n)
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1
      var d = dd.getDate()
      m = m < 10 ? '0' + m : m
      d = d < 10 ? '0' + d : d
      var day = y + '/' + m + '/' + d
      return day
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart'))
      this.setOptionsCharts()
    },
    setOptionsCharts() {
      this.chart.setOption(this.setOptions)
    },
    setOptionsData() {
      this.setOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        dataZoom: [
          {
            type: 'inside',
            throttle: '50',
            minValueSpan: 4,
            start: 0,
            end: 15
          }
        ],
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['体温', '脉搏']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: this.patientRiskdata.patientTempdata.map(obj => { return obj.time })
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '体温(°C)',
            min: 0,
            offset: 20,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: this.colors[0]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '脉搏(次/分)',
            min: 0,
            position: 'right',
            offset: 20,
            axisLine: {
              lineStyle: {
                color: this.colors[1]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '体温(°C)',
            type: 'line',
            yAxisIndex: 0,
            data: this.patientRiskdata.patientTempdata.map(obj => { return obj.temperature })
          },
          {
            name: '脉搏(次/分)',
            type: 'line',
            yAxisIndex: 1,
            data: this.patientRiskdata.patientPulsedata.map(obj => { return obj.pulse })
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 16px;
  .wrapper-left{
    background-color: #fff;
    width: 270px;
    height: 612px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;
    margin-left: 20px;
    margin-top: 20px;

    .left-top{
      .patient-bedno{
        font-size: 20px;
        padding-left: 20px;
        border-left: 2px solid #29a4f2;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .patitent-name-age-sex{
        margin-top: 10px;
        display: flex;
        .patient-name{
          font-weight: bold;
        }
        .patient-sex{
          width: 50px;
          margin-left: 5px;
        }
        .patient-age{
          width: 50px;
          text-align: center;
          margin-left: 5px;
        }
      }
      .patient-patientstatus{
        background-color: #E6A23C;
        color: #FFFFFF;
        width: 100px;
        height: 25px;
        margin-top: 10px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
      }
      .WardRoundRemarksBtn{
        width: 100px;
        height: 25px;
        margin-top: 10px;
        font-size: 16px;
        margin-left: 5px;
        padding: 0;
      }

      .patient-attentionlev{
        display: flex;
        margin-top: 10px;
        display: flex;
        .attentionlev-start{
          width: 100px;

        }
        .attentionlev-value{

        }
      }
    }
    .content{
      margin-top: 10px;
      display: flex;
      .content-title{
        width: 90px;
      }
      .content-value{
        width: 140px;
        word-wrap:break-word;
      }
    }
    .left-bottom{
      margin-top: 20px;
      .bottom-title{
        font-size: 20px;
        padding-left: 20px;
        border-left: 2px solid #29a4f2;
        font-weight: bold;
        margin-bottom: 15px;
      }
    }

  }
  .wrapper-right{
    width: 100%;
    margin: 20px;
    background-color: #fff;
    border-radius: 5px;
    height: 612px;
    .patient-risk{
      display: flex;
      flex-direction: column;
      padding: 20px;
      .risk-title{
        width: 150px;
        font-size: 20px;
        border-left: 2px solid #29a4f2;
        font-weight: bold;
        padding-left: 20px;
      }
      .risk-top{
        display: flex;
        flex-direction: column;
        .risk-top-wrapper{
          display: flex;
          align-content: center;
          align-items: center;
        }
        .risk-icon{
          width: 25px;
        }
        .rick-value{
          display: flex;
          margin-top: 10px;
          .card-list{
            display: flex;
            .card-info-item{
              flex: 0 0 200px;
              width: 200px;
              height: 60px;
              margin: 15px 5px;
              border-radius: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .card-info {
                display: flex;
                flex-direction: column;
                align-content: space-around;
                justify-content: space-around;
                .info-content{
                  text-align: center;
                }
              }
            }
          }
          .change-scrollbar{
            width: 30px;
            height: 65px;
            margin: 15px;
            font-size: 20px;
            background:#28a4f4;
            border: 0;
            padding: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .risk-chart{
        margin-top: 20px;
        width: 990px;
        .myChart{
          width : 950px;
          height: 300px;
        }

      }

    }
  }

}
.c_search{
  width:350px;
  height:40px;
  border-radius:4px;
  padding-left:5px;
  font-size: 12px;
}
.c_searchbtn{
  display:inline-block;
  width:34px;
  height:25px;
  margin-left:3px;
  background:#28a4f4;
  color:#fff;
  font-size:12px;
  text-align:center;
  line-height:26px;
  border-radius:6px;
  cursor:pointer;
}
.risk-select,.input-number{
  width:125px;
  height:40px;
  border-radius:4px;
  padding-left:5px;
  font-size: 12px;
}
// 滚动条
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
// 卡片
/deep/.el-card__body{
  padding: 0;
  margin-top: 0;
}
</style>
